<template>
  <el-dialog
    v-model="visible"
    :title="$t('order.orderPickupS')"
    :close-on-click-modal="false"
    width="50%"
    class="components-order-station"
  >
    <div class="mod-order-orderInfo">
      <el-table
        ref="multipleTableRef"
        :data="dataList"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          prop="changeNum"
          :label="$t('product.pic')"
          fit
          width="100"
        >
          <template #default="scope">
            <img
              v-if="scope.row.pic"
              :src="resourcesUrl + scope.row.pic"
              alt=""
              style="width: 50px"
              @error="imgError(scope.row, 'pic')"
            >
            <img
              v-else
              src="~@/assets/img/def.png"
              alt=""
              style="width: 50px"
            >
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('product.prodName')"
          fit
        >
          <template #default="scope">
            {{ scope.row.prodName }}
            <div
              v-if="
                scope.row.returnMoneySts !== null &&
                  scope.row.returnMoneySts > 0 &&
                  scope.row.returnMoneySts < 6
              "
              class="order-status"
            >
              {{ $t('order.reimburse') }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="prodCount"
          :label="$t('order.amountOfGoods')"
          width="100"
        />
        <el-table-column
          prop="status"
          :label="$t('product.status')"
          show-overflow-tooltip
          width="100"
        >
          <template #default="scope">
            <div
              v-if="
                scope.row.returnMoneySts !== null &&
                  scope.row.returnMoneySts < 6 &&
                  scope.row.returnMoneySts > 0
              "
            >
              {{
                [
                  '',
                  $t('order.buyerApplication'),
                  $t('order.sellerAccepts'),
                  $t('order.buyShipment'),
                  $t('order.sellerReceipt'),
                  $t('order.refundsuccessfully')
                ][scope.row.returnMoneySts]
              }}
            </div>
            <div
              v-else-if="scope.row.status !== 0 && scope.row.status !== -1"
            >
              {{ $t('order.pendingPickUp') }}
            </div>
            <div
              v-else-if="scope.row.status === 0"
            >
              {{
                $t('order.shipmentCompleted')
              }}
            </div>
            <div
              v-else-if="scope.row.status === -1"
            >
              {{ $t('order.toBeShipped') }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="100px"
      @submit.prevent
      @keyup.enter="onSubmit()"
    >
      <div class="detail-cont">
        <div class="detail01">
          <div class="text-width">
            <el-form-item :label="$t('order.shippingInformation') + ':'">
              <span>{{ $t('order.delType') }}：{{ $t('order.selfMention') }}</span>
            </el-form-item>
            <el-form-item>
              <span>{{ $t('publics.addressee') }}：{{ dataForm.stationUserName }}</span>
            </el-form-item>
            <el-form-item>
              <span>{{ $t('publics.mobilePhone') }}：{{ dataForm.stationUserMobile }}</span>
            </el-form-item>
            <el-form-item>
              <span>{{ $t('station.stationAddr') }}：{{ dataForm.stationAddress }}</span>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="100px"
      @submit.prevent
      @keyup.enter="onSubmit()"
    >
      <div class="detail-cont">
        <el-form-item
          :label="$t('order.selfMentionCode') + '：'"
          prop="code"
        >
          <div class="station-code">
            <div class="station-code-input">
              <el-input
                v-model="code"
                :placeholder="$t('order.pleEntPickupCode')"
                style="width: 300px"
                @change="onCheckStationCode"
              />
              <el-button @click="onCheckStationCode">
                校验自提码
              </el-button>
              <span
                v-if="isStationCode === 1"
                class="success-icon icon"
              >✔</span>
              <span
                v-if="isStationCode === 2"
                class="close-icon icon"
              >X</span>
            </div>
            <el-alert
              :title="$t('order.doNotEntPickupCode')"
              type="warning"
              style="height: 35px; width: 300px"
            />
          </div>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <span>
        <el-button
          type="primary"
          @click="visible = false"
        >{{
          $t('crud.filter.cancelBtn')
        }}</el-button>
        <el-button
          type="primary"
          @click="onSubmitProds()"
        >{{ $t('order.pickUp') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
const emit = defineEmits(['refreshOrderStationDataList'])
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
const visible = ref(false)
const dataForm = ref({})
const code = ref('')
const isStationCode = ref(0)
const dataList = ref([])
const isSubmit = ref(false)
const orderNumber = ref()
const orderId = ref()
const init = async order => {
  isSubmit.value = false
  visible.value = true
  code.value = ''
  isStationCode.value = 0
  orderNumber.value = order.orderNumber
  orderId.value = order.orderId
  onClear()
  // 修改
  http({
    url: http.adornUrl('/admin/station/getOrderItemAndStationInfo'),
    method: 'get',
    params: http.adornParams({
      orderNumber: order.orderNumber
    })
  }).then(({ data }) => {
    dataForm.value = data
    dataList.value = data.orderItems
  })
}
const onClear = () => {
  dataForm.value.dvyFlowId = 0
  dataForm.value.dvyId = ''
}
const onCheckStationCode = () => {
  if (code.value === dataForm.value.stationCode || !code.value) {
    isStationCode.value = 1
  } else {
    isStationCode.value = 2
  }
}
const onSubmitProds = () => {
  if (isStationCode.value === 2) {
    onErrorMsg($t('order.pickupCodeError'))
    return
  }
  if (isSubmit.value) {
    return
  }
  isSubmit.value = true
  http({
    url: http.adornUrl('/admin/station/changeStatusAndOrderStation'),
    method: 'put',
    data: http.adornData({
      orderNumber: dataForm.value.orderNumber,
      stationId: dataForm.value.stationId
    })
  }).then(() => {
    ElMessage({
      message: $t('publics.operation'),
      type: 'success',
      duration: 1500,
      onClose: () => {
        visible.value = false
        emit('refreshOrderStationDataList')
      }
    })
  }).catch(() => {
    isSubmit.value = false
  })
}

const onErrorMsg = message => {
  ElMessage({
    message,
    type: 'error',
    duration: 1500
  })
}
defineExpose({ init })
</script>

<style scoped lang="scss">
.components-order-station {
  :deep(.element.style) {
    border-top: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
  }
  .mod-order-orderInfo {
    height: 100%;
    width: 100%;
    font: 14px Arial, 'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
      'WenQuanYi Micro Hei', sans-serif;
    color: #495060;
    .order-status{
      display: inline-block;
      padding: 2px 4px;
      border: 1px solid #e43130;
      border-radius: 2px;
      color: #e43130;
      font-size: 12px;
      margin-right: 5px;
    }
  }
  :deep(.el-input__inner) {
    border: 1px solid #dcdfe6 !important;
  }
  .station-code-input {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    :deep(.el-input__wrapper){
      margin-bottom: 0;
    }
    .close-icon {
      color: red;
    }
    .success-icon {
      color: green;
    }
    .icon {
      margin-left: 20px;
      font-size: 20px;
    }
  }
}
</style>
